<template>
	<div class="pie-chart-box">
		<div id="pieChart"></div>
	</div>
</template>
<script setup>
import { ref, reactive } from "vue";
import echarts from "@/common/utils/echarts.js";
import { changeNumToWan } from "../../utils/handelScreen";

let dataArr = ref([]);
let colorArr = [
	"#1573DE",
	"#E5B563",
	"#7ACA7A",
	"#C2CACE",
	"#CB7F7F",
	"#F8FE92",
	"#E22424",
	"#0EA0F1",
	"#CD80CD",
];
let legendArr = ref([]);
let getColor = (arr, colorArr) => {
	for (let i = 0; i < arr.length; i++) {
		let item = arr[i];
		for (let j = 0; j < colorArr.length; j++) {
			let element = colorArr[j];
			if (i % colorArr.length === j) {
				item.itemStyle = {
					color: element,
				};
			}
		}
	}
	return arr;
};

let options = reactive({
	legend: {
		top: "58%",
		left: "center",
		data: legendArr,
		itemWidth: 10, //正方形
		itemHeight: 10,
		// width: "80%", //组件宽度
		formatter: (name) => {
			return `{a|${name}}`;
		},
		textStyle: {
			color: "#D3E3FF",
			backgroundColor: "transparent",
			rich: {
				a: {
					width: 60,
					padding: [5, 0, 5, 0],
				},
			},
		},
		type: "scroll",
		orient: "vertical",
		// pageButtonPosition: [50, 50],
		pageButtonItemGap: 5,
		pageButtonGap: 10,
		pageIconSize: [10, 8],
		pageIconColor: "#44e6fd",
		pageIconInactiveColor: "#fbffff",
		pageTextStyle: {
			color: "#35ffff",
		},
	},
	graphic: {
		elements: [
			{
				type: "circle",
				shape: {
					r: 50, //半径大小
				},
				style: {
					fill: {
						x: 1,
						y: 1,
						r: 1,
						colorStops: [
							{
								offset: 1,
								color: "rgba(50,171,241, .2)",
							},
							{
								offset: 0.5,
								color: "rgba(50,171,241, 0)",
							},
							{
								offset: 0,
								color: "rgba(50,171,241, .2)",
							},
						],
					}, // 填充颜色
					lineWidth: 0,
					stroke: "rgba(54, 227, 227, .5)",
				},
				left: "33.5%",
				top: "21.5%",
			},
		],
	},
	series: [
		{
			type: "pie",
			data: dataArr.value,
			center: ["50%", "33%"],
			radius: ["40%", "55%"],
			label: {
				show: false,
				position: "center",
			},
			labelLine: {
				show: false,
			},
			emphasis: {
				scaleSize: 10,
				label: {
					show: true,
					formatter: (param) => {
						return `${param.name}\n\n${changeNumToWan(param.value)}万元`;
					},
				},
			},
		},
	],
});

let pieChartRef = null;
let initPieChartData = () => {
	pieChartRef.setOption(options);
};
const initPieChart = (data = []) => {
	const arr = data.map((k) => {
		const { practical, department } = k;
		return {
			name: department,
			value: practical,
		};
	});
	dataArr.value.splice(0);
	dataArr.value.push(...arr);
	legendArr.value = dataArr.value.map((item, i) => {
		return {
			name: item.name,
		};
	});
	legendArr.value = getColor(legendArr.value, colorArr);
	dataArr.value = getColor(dataArr.value, colorArr);
	for (let i = 0; i < dataArr.value.length; i++) {
		let item = dataArr.value[i];
		let color = item.itemStyle.color;
		item.label = {
			color: color,
		};
		item.itemStyle.color = {
			x: 0, //右
			y: 1, //下
			x2: 1, //左
			y2: 0, //上
			colorStops: [
				{
					offset: 0,
					color: color,
				},
				{
					offset: 1,
					color: "#000000",
				},
			],
		};
	}
	if (pieChartRef === null) {
		pieChartRef = echarts.init(document.getElementById("pieChart"));
	}
	initPieChartData();
};
defineExpose({
	initPieChart,
});
</script>
<style lang="scss" scoped>
.pie-chart-box {
	width: 100%;
	height: 100%;
	#pieChart {
		width: 100%;
		height: 100%;
	}
}
</style>
